<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
          html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 禁止滚动条 */
        }

        body {
            background-image: url('/public/static/images/bg2.png');
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex;
            flex-direction: column;
        }

        .icon-bar {
            position: absolute;
            top: 30px;
            left: 30px;
        }


        .icon-bar button {
            background-color: #555;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            float: right;
        }

        .icon-bar button:hover {
            background-color: #000;
        }
        .main{
            position: relative;
            width: 100%;
            height: auto;
            top:200px;
        }
        .left{
            width: 40%;
            position: relative;
            float: left;
        }
        .right{
            position: relative;
            width: 60%;
            float: left;
        }
        .left_2{
            font-size: 20px;
            text-indent: 2em; 
            width: 600px;
            font-weight: 600;
        }
        .left_3{
            margin-top: 50px;
            margin-left: 50px;
        }
        .right_1{
            position: relative;
            float: left;
            margin-left: 50px;
        }
        .right_1 a{
            text-decoration: none;
            color: black;
        }
        .right_1_1{
            text-align: center;
            font-size: 20px;
        }
        .title{
            position: absolute;
            top: 30px;
            right: 50px;
        }

        .back{
            position: absolute;
            bottom: 30px;
            right: 50px;
        }

        .shake-hover {
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .shake-hover:hover {
            transform: scale(1.1);
        }

        /* 抖动动画 */
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }

        .shake-hover:hover {
            animation: shake 0.3s ease-in-out infinite;
        }
       
        .middle-column {
            margin-top: -30px; /* 让第二个和第五个元素上移 */
            transition: margin-top 0.3s ease-in-out;
        }
    </style>
</head>
<body>
    
    <div class="icon-bar">
        <button onclick="window.location.reload()"> <img src="/public/static/images/refresh.png" alt=""></button>
        <button onclick="window.location.href='home.html'"> <img src="/public/static/images/home.png" alt=""></button>
        <button onclick="window.history.forward()"> <img src="/public/static/images/forward.png" alt=""></button>
        <button onclick="window.history.back()"> <img src="/public/static/images/back.png" alt=""></button>
    </div>
<div class="title">
        <img src="/public/static/images/title2.png" alt="" width="600" height="200">
</div>

<div class="back">
    <!-- <div class="left_1"> -->
        <img class="shake-hover" onclick="window.location.href='/'" src="/public/static/images/toHome.png" alt="" width="210" height="150">
    <!-- </div> -->
</div>
<div class="main">
    <div style="margin-left: 50px;">
        <div class="left">
            <div class="left_1">
                <div style="display: flex;align-items: center;"><img src="/public/static/images/dptitle.png" alt="" width="100" height="60"><h1>{$cate.name}</h1></div>
                  
            </div>

            <h2>{$cate.name}的概念</h2>
            <div class="left_2">
                {$cate.desc}
            </div>
            <div class="left_3">
                <img style="margin-left: 80px;" src="/public/static/images/kulou.png" alt="" width="400" height="400">
            </div>
        </div>
        <div class="right" style="margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;row-gap: 40px;">
            {foreach name="record" item="v" key="k"}
                {if $k == 4} <!-- 在第5个元素后（索引从0开始，所以 k == 4）插入 clists.jpg -->
                <div class="right_1 clists-image middle-column">
                    <img class="shake-hover" src="/public/static/images/clists.jpg" alt="" width="300" height="250">
                </div>
                {/if}
        
                <div class="right_1 {if $k == 1 || $k == 4}middle-column{/if}">
                    <a href="{:url('index/index/detail',['id'=>$v['id']])}">
                        <div>
                            <img style="border-radius: 10px" src="/public/{$v.img}" alt="" width="300" height="200">
                        </div>        
                        <div class="right_1_1" style="margin-top: 10px; font-weight: 700;">{$v.name}</div>
                    </a>
                </div>
            {/foreach}
        </div>
    </div>
</div>
</body>
</html>
